<template>
  <div>
     <!-- 通用工具栏 -->
      <navSearch :formList="formList" @btnSearch="btnSearch" ref="formList">
      </navSearch>
      <div class="statistical">
       <el-button type="primary" @click="showDialog = true" plain>新增优惠券</el-button>
       <span class="total">发放总数量：{{sumGrant}}元</span>
       <span class="total">领取总金额：{{sumGet}}元</span>
      </div>
    <el-card v-loading="loading">
      <el-table
        :data="list"
        style="width: 100%"
        >
        <el-table-column
          prop="couponName"
          label="优惠券名称"
          width="130"
          align="center"

          >
        </el-table-column>
        <el-table-column
          prop="couponAmount"
          label="优惠券金额/元"
          width="130"
          align="center"
>
        </el-table-column>
        <el-table-column
          prop="moneyLimit"
          label="使用金额限制"
           width="130"
           align="center">
        </el-table-column>
        <el-table-column
          prop="potLife"
          label="使用时限/天"
          width="130"
          align="center"
>
        </el-table-column>
        <el-table-column
          prop="numLimit"
          label="领取限制/张"
          width="130"
          align="center"
>
        </el-table-column>
        <el-table-column
          prop="countNum"
           width="130"
          label="发放总数量/张"
           align="center">
        </el-table-column>
        <el-table-column
          prop="numAmount"
          label="领取金额/元"
          width="130"
          align="center"
>
        </el-table-column>
         <el-table-column label="操作"  align="center">
           <template #default="{row}">
              <el-button type="text" size="small" @click="editCoupon(row.id)" >编辑</el-button>
              <el-button type="text" size="small" @click="delCoupon(row.id)">删除</el-button>
           </template>
          </el-table-column>
      </el-table>
      <!-- 分页组件 -->
        <el-row  type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
              class="paging"
              layout="prev, pager, next"
              >
            </el-pagination>
        </el-row>
    </el-card>

    <!-- 放置新增和编辑组件 -->
    <add-coupon ref="coupon" :showDialog.sync='showDialog' />
  </div>
</template>

<script>
import AddCoupon from './components/addCoupon'
import { getGeneralCouponList, delCoupon } from '@/api/generalCoupon'
export default {
  components: {
    AddCoupon
  },
  data () {
    return {
      loading: false,
      list: [],
      // page: {
      //   page: 1, // 当前页码
      //   size: 10,
      //   total: 0 // 总数
      // },
      showDialog: false,
      formList: { discount: true }

    }
  },
  created () {
    this.getGeneralCouponList()
  },
  computed: {
    sumGrant () {
      return this.list.reduce((sum, value) => {
        return value.countNum + sum
      }, 0)
    },
    sumGet () {
      return this.list.reduce((sum, value) => {
        return value.numAmount + sum
      }, 0)
    }
  },
  methods: {
    async getGeneralCouponList () {
      // this.loading = true
      this.list = await getGeneralCouponList()

      // this.loading = false
    },
    // 删除优惠券
    async delCoupon (id) {
      try {
        await this.$confirm('你确定删除此优惠券吗')
        await delCoupon(id)
        this.getGeneralCouponList()

        this.$message.success('删除优惠券成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑部门节点
    editCoupon (id) {
      // 首先打开弹层
      this.showDialog = true
      // this.node = node // 赋值操作的节点
      // 需要在这里 调用子组件的方法
      // 父组件 调用子组件的方法
      this.$refs.coupon.getCouponDetail(id)
      // 直接调用子组件中的方法 传入一个id
    },
    btnSearch (formData) {
      const { discount } = formData
      if (discount !== '') {
        this.list = this.list.filter(v => {
          return v.couponName === discount
        })
        this.$refs.formList.btnReset()
      } else {
        this.getGeneralCouponList()
      }
    }
  }
}
</script>

<style scoped>
.paging{
  height: 10px;
}
thead{
  line-height: 40px;
}
span{
  margin-left: 100px;
}
.statistical{
  margin: 20px 0 ;
}
</style>
